<template>
    <div class="payMemberCard">
        <el-dialog :visible.sync="show" width="1000px" :before-close="handleClose" custom-class="membership-dialog">
            <div class="memberBox">
                <div class="leftBox">
                    <div class="titleBox">会员权益</div>
                    <div class="subBox">
                        <div class="subtitle"> 无限次数使用（核心权益）</div>
                        <div class="item">• 移除每日3次的限制，会员可无限次使用核心AI功能</div>
                        <div class="subtitle"> 高级功能解锁</div>
                        <div class="item">• 独享AI长文本续写等付费专属功能</div>
                        <div class="subtitle"> 极速响应通道</div>
                        <div class="item">• 优先服务器资源，生成速度提升300%</div>
                        <div class="subtitle"> 专属客服通道</div>
                        <div class="item">• VIP专属客服，问题响应时间缩短至30分钟内</div>
                    </div>
                </div>
                <!-- 会员选项卡片 -->
                <div class="rightBox">
                    <div class="vipBox">
                        <div class="vipText">
                            <img class="vip" src="../../assets/images/tool/vip1.png" alt="">开通会员

                        </div>
                        <div class="line"></div>
                    </div>
                    <div class="userInfo">
                        <img src="../../assets/images/profilePhoto.png" alt=""> ID:{{userInfo.userName}}
                    </div>
                    <div class="membership-options">
                        <div v-for="option in membershipOptions" :key="option.vipCode"
                            :class="['membership-card', { 'active': membership.vipCode === option.vipCode }]" @click="selectedMembership(option)">
                            <div class="card-content">
                                <h3>{{ option.vipName }}</h3>
                                <p class="price">{{ option.vipPrice }}</p>
                                <!-- <p class="description">{{ option.description }}</p> -->
                            </div>
                        </div>
                    </div>
                    <div class="WeChatBox" v-loading="loading">
                        <div class="imgBox">
                            <img v-if="qrCodeBase64&&agree" class="QRCode" :src="qrCodeBase64" alt="QR Code">
                            <span v-if="!agree">请同意《充值协议》</span>
                            <!-- <img class="WeChatPay" src="../../assets/images/WeChatPay.png" alt=""> -->
                        </div>
                        <div class="priceBox" v-if="qrCodeBase64">
                            <div class="price">￥
                                <span>{{membership.vipPrice}}</span>
                                <!-- <img class="WeChatPay" src="../../assets/images/WeChatPay.png" alt=""> -->
                            </div>
                            <div class="agreeBox">
                                <span class="">使用微信扫码支付</span>
                            </div>
                            <div class="agreeBox">
                                <el-checkbox v-model="agree">
                                </el-checkbox>
                                <p>
                                    <span class="">同意并接受</span>
                                    <a class="agreemen" @click="gotoagreemen">《充值协议》</a>
                                    <span class="">条例</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部按钮 -->
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取消</el-button> -->
                <!-- <el-button type="primary" @click="confirmMembership">确认开通</el-button> -->
            </span>
        </el-dialog>
    </div>
</template>

<script>
import toolBox from "@/api/toolBox";
import { phoneLogin, sendSms, getUserInfo } from "@/api/login";
import QRCode from 'qrcode';
export default {
    data() {
        return {
            membershipOptions: [],
            membership: '',
            show: true,
            userInfo: {},
            qrCodeBase64: '',
            payStatusTime: null,
            agree: true,
            loading: false
        }
    },
    created() {
        this.queryAllVipTypeM()
        this.getUserInfoM()
        this.show = this.$store.state.user.dialogPayMemberCard
    },
    computed: {
        dialogPayMemberCard() {
            return this.$store.state.user.dialogPayMemberCard;
        }
    },
    watch: {
        dialogPayMemberCard(newVal, oldVal) {
            console.log('niininini', newVal, oldVal);
            this.show = newVal ? newVal : false
            // 在这里执行你的逻辑
        }
    },
    methods: {
        gotoagreemen() {
            window.open('/agreemen')
        },
        // 获取会员类型
        queryAllVipTypeM(tool, index) {
            let that = this
            toolBox.queryAllVipType().then(val => {
                if (val.code == 200) {
                    this.membershipOptions = val.data
                    this.membership = this.membershipOptions[0]
                    this.wxUnifiedOrderM()
                    this.dialogVisible = true
                }
            })
        },
        handleClose() {
            clearInterval(this.payStatusTime)
            this.payStatusTime = null; // 将引用设置为 null，避免内存泄漏
            this.$store.dispatch("setDialogPayMemberCard", false)
        },
        getUserInfoM() {
            getUserInfo().then(val => {
                console.log(val)
                if (val.code == 200) {
                    this.userInfo = val.data
                    this.$store.dispatch('setUserInfo', val.data)
                }
            })
        },
        selectedMembership(item) {
            this.membership = item
            this.wxUnifiedOrderM()
        },
        wxUnifiedOrderM() {
            this.qrCodeBase64 = ''
            this.loading = true
            toolBox.wxUnifiedOrder({
                orderVipType: this.membership.vipCode
            }).then(val => {
                if (val.code == 200) {
                    QRCode.toDataURL(val.data.er_code).then(res => {
                        this.qrCodeBase64 = res
                        this.loading = false
                    });
                    this.setPayStatusTime(val.data.order_code)
                }
            })
        },
        setPayStatusTime(value) {
            let that = this
            if (that.payStatusTime) {
                clearInterval(that.payStatusTime)
            }
            this.payStatusTime = setInterval(() => {
                toolBox.checkPayStatus({
                    code: value
                }).then(val => {
                    console.log(val)
                    if (val.code == 200) {
                        if (val.data) {
                            // 支付成功
                            clearInterval(that.payStatusTime)
                            this.payStatusTime = null; // 将引用设置为 null，避免内存泄漏
                            this.$modal.msgSuccess("支付成功");
                            this.$store.dispatch("setDialogPayMemberCard", false)
                        }
                    }
                })
            }, 2000)
        }
    },
    beforeDestroy() {
        if (this.payStatusTime !== null) {
            clearInterval(this.payStatusTime)
            this.payStatusTime = null; // 将引用设置为 null，避免内存泄漏
        }
    }
}
</script>

<style lang="scss" scoped>
.payMemberCard {
    ::v-deep .el-dialog__header,
    ::v-deep .el-dialog__body,
    ::v-deep .el-dialog__footer {
        padding: 0 !important;
        margin-top: calc((100vh - 600px) / 2) !important;
    }
    ::v-deep .el-dialog {
        background-color: transparent !important;
        box-shadow: none;
    }
    .memberBox {
        display: flex;
        justify-content: space-between; // width: 800px;
        border-radius: 10px !important;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        overflow: hidden;
        .leftBox {
            // background-color: #909399;
            background-image: url("../../assets/images/tool/payLeftBg.png");
            background-size: 100% 100%;
            width: 30%;
            padding: 40px;
            .titleBox {
                font-size: 26px;
                font-weight: 600;
                padding-bottom: 20px;
                margin-bottom: 20px;
                border-bottom: #dce0e9 1px solid;
            }
            .subBox {
                text-align: left;
                .subtitle {
                    font-size: 18px;
                    margin: 15px 0 5px 0;
                }
                .item {
                    font-size: 16px;
                    line-height: 1.4;
                }
            }
        }
        .rightBox {
            width: 70%;
            text-align: left;
            padding: 40px;
            .vipBox {
                color: #000;
                margin-bottom: 20px;
                position: relative;
                // width: fit-content;
                height: 35px;
                .vipText {
                    display: flex;
                    font-size: 26px;
                    font-weight: 600;
                    align-items: center;
                    img {
                        width: 20px;
                        height: 20px;
                        margin-right: 5px;
                    }
                    position: absolute;
                    top: 0;
                    z-index: 10;
                }
                .line {
                    width: 140px;
                    height: 10px;
                    border-radius: 50px;
                    position: absolute;
                    bottom: 0;
                    z-index: 5;
                    background-image: linear-gradient(
                        to right,
                        #83c8f5,
                        #53abf7
                    );
                }
            }
            .userInfo {
                display: flex;
                align-items: center;
                img {
                    width: 30px;
                    height: 30px;
                    margin-right: 10px;
                }
            }
        }
    }
    /* 会员选项布局 */
    .membership-options {
        display: flex;
        justify-content: space-between;
        margin: 20px 0 0 0;
        padding-bottom: 30px;
        border-bottom: #edeef1 1px solid;
        .membership-dialog {
            border-radius: 10px;
        }
        /* 会员卡片样式 */
        .membership-card {
            width: 23%;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid #ebeef5;
            border-radius: 10px;
            height: fit-content;
        }
        .membership-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        .membership-card.active {
            border-color: #409eff;
            background-color: #f5f7fa;
        }
        /* 卡片内容样式 */
        .card-content {
            padding: 20px;
        }
        .card-content h3 {
            font-size: 18px;
            margin-bottom: 10px;
            color: #303133;
        }
        .card-content .price {
            font-size: 24px;
            font-weight: bold;
            color: #409eff;
            margin-bottom: 10px;
        }
        .card-content .description {
            font-size: 14px;
            color: #909399;
        }
    }
    .WeChatBox {
        display: flex;
        min-height: 200px;
        padding-top: 20px;
        .imgBox {
            display: block;
            width: 200px;
            height: 200px;
            border: #edeef1 1px solid;
            border-radius: 10px;
            margin-right: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            .QRCode {
                width: 190px;
                height: 190px;
                display: block;
            }
            .WeChatPay {
                width: 100px;
                margin: 0 auto;
                display: block;
            }
        }
        .priceBox {
            padding-top: 30px;
            .price {
                color: #ff3300;
                font-weight: 600;
                font-size: 18px;
                padding-bottom: 20px;
                span {
                    font-size: 36px;
                }
            }
            .WeChatPay {
                width: 70px;
                margin-left: 30px; // margin: 30px auto;
                // display: block;
            }
            .agreeBox {
                display: flex;
                align-items: center;
                font-size: 12px;
                .agreemen {
                    margin-left: 0px;
                    color: #409eff;
                    cursor: pointer;
                }
                p {
                    padding-left: 10px;
                }
            }
        }
    }
}
</style>
